<template>
  <div class="app-container">
    <!--表格-->
    <el-table
      ref="multipleTable"
      :data="orders"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column prop="user.userName" label="买家名" align="center" width="70"></el-table-column>
      <el-table-column prop="product.productName" label="商品名称" align="center" width="150"></el-table-column>
      <el-table-column prop="orderProductNum" label="购买数量" align="center" width="60"></el-table-column>
      <el-table-column prop="orderPrice" label="订单价格" align="center" width="100"></el-table-column>
      <el-table-column prop="orderAddress" label="订单地址" align="center" width="150"></el-table-column>
      <el-table-column prop="product.productKind" label="商品类别" align="center" width="70"></el-table-column>
      <el-table-column prop="orderDate" label="下单时间" align="center" ></el-table-column>
      <el-table-column prop="oState.orderStateName" label="订单状态" align="center" width="100"></el-table-column>
      <el-table-column label="操作" min-width="100" align="center" >
        <template slot-scope="scope">
          <span v-if="scope.row.orderState===0">
            <el-popconfirm title="确定退款吗？" @onConfirm="backMoney(scope.row.orderId)">
              <el-button size="mini" type="primary"  slot="reference">退款</el-button>
            </el-popconfirm>
            <el-button size="mini" type="warning" style="margin-left:20px" @click="getOrderById(scope.row.orderId)">修改地址</el-button>
          </span>
          <span v-else-if="scope.row.orderState===1">
              <el-button  size="mini" type="success" @click="confirmReceipt(scope.row.orderId)">确认收货</el-button>
              <el-button size="mini" type="primary" @click="refund(scope.row.orderId)">申请退款</el-button>
          </span>
          <span v-else-if="scope.row.orderState===3">
              <el-button  size="mini" type="danger" @click="cancelRefund(scope.row.orderId)">取消退款</el-button>
          </span>
          <span v-else-if="scope.row.orderState===4">
            <el-popconfirm title="确定取消订单吗？" @onConfirm="cancelOrder(scope.row.orderId)">
              <el-button size="mini" type="warning" slot="reference" >取消订单</el-button>
            </el-popconfirm>
             <el-popconfirm title="确定付款吗？" @onConfirm="pay(scope.row.orderId)">
              <el-button  size="mini" type="danger" slot="reference" style="margin-left: 20px">付款</el-button>
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <!--分页栏-->
    <el-row>
      <el-col :span="20" align="center">
        <el-pagination background layout="prev, pager, next" :current-page="currentPage" :hide-on-single-page="hidePage" :page-size="pageSize" :total="total" @current-change="page"></el-pagination>
      </el-col>
    </el-row>
    <!--更新弹窗-->
    <el-dialog title="修改地址" status-icon :visible.sync="orderDialogVisible" >
      <el-form :model="orderForm" ref="orderForm" :rules="rules">
        <el-row :gutter="60">
          <el-col :span="12">
            <el-form-item label="收货地址" prop="orderAddress" >
              <el-input v-model="orderForm.orderAddress" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="updateOrder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/cbp-request.js'
  import Cookies from 'js-cookie'
  // 编写vue.js代码
  export default {
    data() {
      return {
        currentPage:1,
        pageSize:10,
        total:0,
        hidePage:true,
        orderDialogVisible:false,
        orders:[],
        orderForm: {
          orderId:'',
          orderAddress: '',
          orderDate: '',
        },
        rules: {
          orderAddress:[
            { required: true, message: '请输入收货地址', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      page(pageNum){
        request({
          url:'/order/page/'+pageNum+"/"+this.pageSize,
          method:'get',
        }).then((resp) =>{
          this.orders = resp.data.list;
          this.total = resp.data.total;
          this.currentPage = resp.data.pageNum;
        })
      },
      //弹窗回显订单
      getOrderById(orderId){
        request({
          url:'/order/getOrderById/'+orderId,
          method:'get',
        }).then((resp) =>{
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            })
            var date = new Date();
            this.orderForm=resp.data;
            this.orderForm.orderDate=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
            this.orderDialogVisible=true;
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
          }
        })

      },
      // 修改订单
      updateOrder(){
        request({
          url:'/order/updateOrder',
          method:'put',
        }).then((resp) =>{
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            })
            this.page(this.currentPage);
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
            this.page(this.currentPage);
          }
        })
      },
      // 取消订单
      cancelOrder(orderId){
        request({
          url:'/order/cancelOrder/'+orderId,
          method:'put',
        }).then((resp) =>{
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            })
            this.page(this.currentPage);
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
            this.page(this.currentPage);
          }
        })
      },
      // 确认收货
      confirmReceipt(orderId){
        request({
          url:'/order/confirmReceipt/'+orderId,
          method:'put',
        }).then((resp) =>{
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            })
            this.page(this.currentPage);
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
            this.page(this.currentPage);
          }
        })
      },
      // 申请退款
      refund(orderId){
        request({
          url:'/order/refund/'+orderId,
          method:'put',
        }).then((resp) =>{
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            })
            this.page(this.currentPage);
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
            this.page(this.currentPage);
          }
        })
      },
      // 取消退款
      cancelRefund(orderId){
        request({
          url:'/order/cancelRefund/'+orderId,
          method:'put',
        }).then((resp) =>{
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            })
            this.page(this.currentPage);
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
            this.page(this.currentPage);
          }
        })
      },
      // 退款
      backMoney(orderId){
        request({
          url:'/order/backMoney/'+orderId,
          method:'put',
        }).then((resp) =>{
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            })
            this.page(this.currentPage);
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
            this.page(this.currentPage);
          }
        })
      },
      // 付款
      pay(orderId){
        request({
          url:'/order/pay/'+orderId,
          method:'put',
        }).then((resp) =>{
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            })
            this.page(this.currentPage);
          }
          if (resp.status === 4000) {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
            this.page(this.currentPage);
          }
        })
      },
    },mounted() {
      this.page(1);
    }
  }
</script>

<style scoped>
  .app-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }
</style>
